<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core"
    xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:a4j="http://richfaces.org/a4j" xmlns:rich="http://richfaces.org/rich">

  <body>
  		<ui:composition template="/templates/template.xhtml">
  		
  			<ui:define name="title">RichFaces Sample</ui:define>
  		
  		    <ui:define name="body">
  		    
    	    	<h2><h:outputText value="This is our first JSF 2.0 example" /></h2>
	        	<h:form>
	        		Name: <h:inputText value="#{helloWorld.name}" />
    		    	<h:commandButton action="#{helloWorld.doSomething}" value="Something is gonna happen" />
    	    	</h:form>    
	
				<h:form>        
		        <rich:panel header="Richfaces running on JBoss AS 7">
    	    	  <f:facet name="header">
        		    <h:outputText value="I'm panel header"/>
		      	  </f:facet>
			      <ul>
    			    <li>RichFaces is a component library for JSF and an advanced framework</li>
        			<li>for easily integrating AJAX capabilities into business applications.</li>
		     	  </ul>   
	    	 	  <br />
			  	<h:panelGrid columns="3"> 
	 	    		<h:outputText value="Enter your name" />
	    	 		<h:inputText id="name" value="#{userBean.name}">
				        <rich:validator />
	 			    </h:inputText>
 	
    		 		<rich:message for="name" />
    	 		
	     			<h:outputText value="Enter your surname" />
     				<h:inputText id="surname" value="#{userBean.surname}">
		    	    <rich:validator />
	 			    </h:inputText>
 		
	    	 		<rich:message for="surname" />
        	    	
            		<h:outputText value="Enter your state" />
	        	    <rich:autocomplete id="country" mode="ajax" minChars="1" 
    		        	var="country"
    		        	autocompleteList="#{userBean.countriesList}"
    	    	        value="#{userBean.state}" fetchValue="#{userBean.state}"  >  
	            	  <h:column>  
	              		<h:outputText value="#{country}" />  
    	        	 </h:column>  
        		    </rich:autocomplete>  
			    	<rich:message for="country" />
		
				    <h:outputText value="Enter your state" />
	        	    <rich:autocomplete id="country2" mode="client" 
            			autocompleteMethod="#{userBean.autocomplete}">  
	        	  	</rich:autocomplete>  
				    <br/>
		
 					<a4j:commandButton value="Register"
    	    	        action="#{userBean.register}" />
			   	</h:panelGrid>
     			</rich:panel>
     			</h:form>
     		</ui:define>
     	</ui:composition>
  </body>
</html>